<template>
  <div id="app">
    <p class="p"><span @click="back()">&lt;</span> <b>优酷vip</b></p>

    <div class="guanzhu">
      <img src="../../assets/img/yl-img/hy-02.jpg" class="gz1" />
      <h6>
        <!-- 登陆前展示 -->
        <div v-show="show">
          <p>VIP请登录</p>
          <span>您的会员已过期</span>
        </div>

        <!-- 登录后展示 -->
        <div class="c8" v-show="!show">
          <p>用户:{{ username }}</p>
          <span>您的会员将于2030年到期</span>
        </div>
      </h6>
    </div>

    <div class="hy">
      <br />
      <p class="yk">优酷vip会员</p>
      <span style="color:#a8a8aa;margin-top:0.08rem;margin-bottom:0.12rem;display: block;">手机/平板/电脑均可使用</span>
      <ul >
      <li class="pay-container" v-for="(list, index) in payconfigEntities"
        :key="index" :class="{ colorChange: index == dynamic }"
        direction="column"
        @click="getMoney(index)">        
        <p class="pay-money">{{ list.effect }}</p>
        <p class="pay-time">￥<span>{{ list.duration }}</span></p>
        <p  class="pay-times">{{list.yuefen}}.00/月</p>
        </li>
      </ul>
      <p style="color:#a4a4ac">0.1元抢优酷7天vip,同时享连续包月折扣守月3月6元/月,第4月恢复15元/月,连续包月可随时解约</p>
    </div>
    <div class="zf">
<van-radio-group v-model="radio">
  <p class="zfb" ><img src="../../assets/img/yl-img/hy/zfb.jpg" alt=""><span>支付宝</span > <span class="radio1"><van-radio name="1"></van-radio></span></p>
  <p class="wx"><img src="../../assets/img/yl-img/hy/wx.jpg" alt=""><span>微信</span><span class="radio2"><van-radio name="2"></van-radio></span></p>
</van-radio-group>
    </div>


    <van-cell is-link @click="showPopup">
      <input type="button" value="确认协议并支付" class="input" />
    </van-cell>
    <van-popup
      v-model="show"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '40%' }">
      <p class="nian">确认并支付</p>
      <img src="../../assets/img/yl-img/hy/fy.jpg" class="img2" />
    </van-popup>
  </div>
</template>

<script>
// import { Toast } from "vant";
export default {
  name: "Kaitong",
  data() {
    return (
      {
        show: true,
        
        showShare: false,
        active: 2,
      },
      {
        username: "",
        show: false,
          radio: '1',
        payconfigEntities: [
          { duration: 0.1, effect: "7天VIP", yuefen: 0.1 },
          { duration: 99, effect: "年度VIP", yuefen: 9 },
          { duration: 108, effect: "半年VIP", yuefen: 18 },
        ],
        dynamic: -1,
      }
    );
  },
  mounted() {
    let list = localStorage.getItem("username");
    this.username = list;

    if (list) {
      this.show = false;
    } else {
      this.show = true;
    }
  },
  methods: {
    back() {
      this.$router.back();
    },
    getMoney: function (index) {
      console.log(index);
      //点击添加字体颜色，其他的删除class名称
      this.dynamic = index;
    },
    showPopup() {
      this.show = true;
      
    },
  },
};
</script>

<style scoped>
.colorChange {
  background-color: #fee6b6;
}
.zfb{
  height: 0.24rem;
  margin-left: 0.15rem;
}
.zf{
  height: 1.10rem;
  position: relative;
  
}
.wx span{
  position: absolute;
  top: 0;
}
.zfb span{
   position: absolute;
  top: 0;
}
.radio1{
   position: absolute;
  top: 0;
 right: 0.1rem;

}
.radio2{
   position: absolute;
  top: 0;
  right: 0.1rem;

}
.wx{
  position: relative;
  height: 0.24rem;
   margin-left: 0.15rem;
   margin-top: 0.2rem;
}
.guanzhu h6 {
  margin-top: 0.18rem;
  margin-left: 0.16rem;
  /* background-color: blueviolet; */

  margin-bottom: 0.25rem;
  display: block;
}
.yk{
  font-size: 0.18rem;
  font-weight: bold;
}
.guanzhu {
  margin-top: 0.42rem;
  margin-bottom: 0.36rem;
}
.guanzhu h6 p {
  font-size: 0.16rem;
  color: black;
  margin-top: 0.1rem;
}
.van-cell {
  margin-top: -0.1rem;
  /* border-radius: 0.1rem; */
}
.van-icon-arrow {
  display: none;
  /* border-radius:0.1rem ; */
}

.input {
  /* margin-left: 0.15rem; */
  width: 3.8rem;
  height: 0.43rem;
  background-color: #fed98b;
  color: #693900;
  text-align: center;
  font-size: 0.12rem;
  border-radius: 0.1rem;
  border: 0;
}
.img2 {
  margin-left: 23%;
  margin-top: 0.2rem;
}
.nian {
  margin-left: 38%;
  margin-top: 0.1rem;
  font-size: 0.2rem;
}
.guanzhu h6 span {
  font-weight: normal;
  font-size: 0.12rem;
  color: #a8a6a9;
  margin-top: 0.05rem;
}
.pay-time span{
  font-size: 0.34rem;
  
}
.pay-money{
  margin-top: 0.21rem;
  margin-bottom: 0.11rem;
}
.gz1 {
  width: 0.47rem;
  height: 0.47rem;
  border-radius: 50%;
  float: left;
  margin-left: 0.18rem;
  margin-top: 0.05rem;
  margin-bottom: 0.25rem;
}
.p {
  width: 100%;
  height: 0.4rem;
  background-image: linear-gradient(to bottom right, #ffe7b9, #fdf1d1);
}
.p span {
  margin-left: 0.16rem;
  line-height: 0.4rem;
}
.p b {
  margin: auto;
  margin-left: 35%;
}
.hy {
  /* height: 2.1rem; */
  margin-left: 0.15rem;
  /* background-color: blueviolet; */ 
  margin-bottom: 0.2rem;
}
.hy li {
  width: 1.68rem;
  height: 1.58rem;
  /* background-color: #fee6b8; */
  border-radius: 0.2rem;
  margin-right: 0.1rem;
  border: 0.01rem solid #f6f4f6;
}
.hy ul {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  width: 4.0rem;
  height: 1.58rem;
  text-align: center;
 
}
.hy ul ::-webkit-scrollbar {
  display: none;
}
</style>
